<script>

import {
  getDeleteTopic,
  getEdmitTopic,
  getEdmitTopicSubmit,
  getTopicAdd,
  getTopicName
} from "@/api/tool/scheduling/funScheduling";

export default ({
  name: "heartDetails",
  data() {
    return {
      total: '',
      // 题目名称下拉框
      // 接口参数
      TopicName: {
        assessmentId: this.$route.query.id,
        pageNum: 1,
        pageSize: 10,
      },
      // 题目名称接口接收数组
      topicList: [],
      // 顶部输入框
      ruleForm: {
        topicName: '',
      },
      //   表格
      tableData: [],
      arr: [],
      //   添加
      dialogVisible: false,
      input: '',
      // 编辑
      dialogEdmitVisible: false,
      edmitList: [],
      //   搜索
      searchList: [],
      searchList2: [],
      //   添加弹框
      dynamicValidateForm: {
        domains: [
          {
            content:'',
            optname:'',
            score:0,

          },
          {
            content:'',
            optname:'',
            score:0,

          },
          {
            content:'',
            optname:'',
            score:0,

          },
          {
            content:'',
            optname:'',
            score:0,

          },

        ],
        title: '',
      },
      //   添加弹框
      num: 1,
      addTopicList: {
        assessmentId: this.$route.query.id,
        title: "",
        sort: 0,
        option: [
          {
            optname:'',
            content:'',
            score:0
          }
        ]
      },
      option: [],

      //   提交编辑题目
      submitEdmitTopic: {
        id: 0,
        title: "",
        option: [
          {
            id: 0,
            optname: "",
            content: "",
            score: 0
          }
        ]
      },
      ids:'',


    }
  },
  methods: {
    load() {
      this.arr = []
      // console.log(this.TopicName)
      getTopicName(this.TopicName).then(res => {
        // console.log(res)
        this.topicList = res.rows
        this.tableData = res.rows
        // console.log(this.topicList)
        this.tableData.forEach(item => {
          this.arr.push({index: `${item.id}`, topicName: `${item.title}`})
        })

      })
    },
    // 顶部输入框
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          alert('error submit!!');
          // console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.load()
    },
    //   删除
    handClick(row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该测评信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeleteTopic(row.index).then(res => {
          // console.log(res)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.load()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //   添加弹框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //   搜索
    search() {
      this.searchList2 = []
      this.topicList.forEach(item => {
        // this.searchList.push(item.title)
        if (item.title.search(this.ruleForm.topicName) != -1) {
          this.searchList2.push({index: `${item.id}`, topicName: `${item.title}`})
        }
      })
      this.arr = this.searchList2
    },
    //分页方法
    handleCurrentChange(val) {
      // console.log(val)
      this.TopicName.pageNum = val
      getTopicName(this.TopicName).then(res => {
        this.tableList = res.rows
      })
    },

    //   添加弹框
    add(){
      this.dialogVisible = true
      this.dynamicValidateForm.domains=[
        {
          content:'',
          optname:'',
          score:'',
        },
        {
          content:'',
          optname:'',
          score:'',
        },
        {
          content:'',
          optname:'',
          score:'',
        },
        {
          content:'',
          optname:'',
          score:'',
        },

      ]
    },
    // 添加提交按钮
    submitFormAdd(formName) {

      this.dialogVisible = false
      this.addTopicList.option = this.dynamicValidateForm.domains
      this.addTopicList.option.forEach((item,index) => {
        switch (index){
          case 0:
            return item.optname='A'
            break;
          case 1:
            return item.optname='B'
            break;
          case 2:
            return item.optname='C'
            break;
          case 3:
            return item.optname='D'
            break;
          case 4:
            return item.optname='E'
            break;
          case 5:
            return item.optname='F'
            break;
          case 6:
            return item.optname='G'
            break;
          case 7:
            return item.optname='H'
            break;
        }
      })
      // console.log(this.addTopicList)
      getTopicAdd(this.addTopicList).then(res => {
        // console.log(res)
      })
      this.$message({
        type: 'success',
        message: '添加成功!'
      });
      this.load()
      this.addTopicList.title=''
    },


    // 编辑
    edmit(row) {
      this.dialogEdmitVisible = true
      // console.log(row)
      this.ids=row.index
      getEdmitTopic(row.index).then(res => {
        // console.log(res)
        this.edmitList = res.data
        this.addTopicList.title = this.edmitList.title
        this.dynamicValidateForm.domains=[]
        this.dynamicValidateForm.domains=this.edmitList.option.map(item=>{
          return item
        })
      })

    },
    // 修改表单提交
    submitFormEdmit() {
      this.dialogEdmitVisible = false
      this.submitEdmitTopic.id=this.ids
      this.submitEdmitTopic.title=this.addTopicList.title
      this.submitEdmitTopic.option=this.dynamicValidateForm.domains

      // console.log(this.submitEdmitTopic)
      getEdmitTopicSubmit(this.submitEdmitTopic).then(res => {
        // console.log(res)
      })
      this.$message({
        type: 'success',
        message: '修改成功!'
      });

      this.load()
      this.addTopicList.title=''

    },

    // 删除选项
    removeDomain(item) {
      if (this.dynamicValidateForm.domains.length < 3) {
        this.$message({
          type: 'warning',
          message: '最少有两个选项'
        });
      } else {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      }
    },
    addDomain() {
      if (this.dynamicValidateForm.domains.length > 7) {
        this.$message({
          type: 'warning',
          message: '最多只能有八个选项'
        });
      } else {
        this.dynamicValidateForm.domains.push({
          content: '',
          score: '',
          optname: '',
          id:''
        });
      }

    },
    // 添加弹框
    handleChange(value) {
      // console.log(value);
    },
    changelabel(index){
      switch (index) {
        case 0:
          return 'A'
          break;
        case 1:
          return 'B'
          break;
        case 2:
          return 'C'
          break;
        case 3:
          return 'D'
          break;
        case 4:
          return 'E'
          break;
        case 5:
          return 'F'
          break;
        case 6:
          return 'G'
          break;
        case 7:
          return 'H'
          break;

      }

    },

  },
  created() {
    this.load()

  },

})
</script>

<template>
  <div class="body">
    <div class="formBox">
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="题目名称" prop="topicName">
                <el-input type="text" v-model="ruleForm.topicName" autocomplete="off" placeholder="请输入内容" clearable
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="padding: 0  30px">
      <!--    添加按钮      -->
      <div>
        <el-button type="primary" @click="add" style="margin-bottom: 20px">添加</el-button>
      </div>
      <!--    表格主体      -->
      <div>
        <el-table
          :data="arr"
          border
          style="width: 100%">
          <el-table-column
            fixed
            label="序号"
            width="180">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="topicName"
            label="题目名称"
            width="810">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="170">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="edmit(scope.row)">编辑</el-button>
              <el-button @click="handClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--    分页     -->
    <div class="pag-btn" style="margin-top: 30px;float: right">
      <el-pagination
        :total="Number(total)"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!--    添加弹框      -->
    <div class="addBtn">
      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div class="dialogBody">
          <div class="dialogTop">
            <div>题目</div>
            <div class="TopicContent">
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="addTopicList.title"
                maxlength="100"
                show-word-limit
                class="TopicContentInput"
              >
              </el-input>
            </div>
          </div>
          <div class="dialogBottom">
            <div>选项内容</div>
            <div style="display: flex">
              <div class="OptionContent">
                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px"
                         class="demo-dynamic">
                  <el-form-item
                    v-for="(item,index) in dynamicValidateForm.domains"
                    :key="item.id"
                    :label="changelabel(index)"
                    :rules="{required: true, message: '选项不能为空', trigger: 'blur'}"
                  >
                    <el-input v-model="item.content"  class="optionInput"></el-input>
                    <el-input-number  v-model="item.score" controls-position="right"
                                      @change="handleChange" class="numberInput"
                                      :min="0" :max="10" style="margin:0 20px 0 10px"></el-input-number>
                    <el-button @click.prevent="removeDomain(item)">删除</el-button>
                  </el-form-item>
                  <el-form-item class="newAdd">
                    <el-button type="primary" @click="addDomain">新增</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFormAdd('dynamicValidateForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--    编辑弹框       -->
    <div>
      <el-dialog
        title="编辑"
        :visible.sync="dialogEdmitVisible"
        width="30%"
        :before-close="handleClose">
        <div class="dialogBody">
          <div class="dialogTop">
            <div>题目</div>
            <div class="TopicContent">
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="addTopicList.title"
                maxlength="100"
                show-word-limit
                class="TopicContentInput"
              >
              </el-input>
            </div>
          </div>
          <div class="dialogBottom">
            <div>选项内容</div>
            <div style="display: flex">
              <div class="OptionContent">
                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px"
                         class="demo-dynamic">
                  <el-form-item
                   v-for="(item,index) in dynamicValidateForm.domains"
                   :key="item.id"
                    :label="changelabel(index)"
                    :rules="{required: true, message: '选项不能为空', trigger: 'blur'}"
                  >
                    <el-input v-model="item.content"  class="optionInput"></el-input>
                    <el-input-number  v-model="item.score" controls-position="right"
                                     @change="handleChange" class="numberInput"
                                     :min="0" :max="10" style="margin:0 20px 0 10px"></el-input-number>
                    <el-button @click.prevent="removeDomain(item)">删除</el-button>
                  </el-form-item>
                  <el-form-item class="newAdd">
                    <el-button type="primary" @click="addDomain">新增</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogEdmitVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFormEdmit('dynamicValidateForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<style scoped lang="scss">

//添加按钮
.addBtn {
  margin-left: 3px;
}

//添加弹框表单
::v-deep .el-input--medium {
  font-size: 14px;
  text-align: left;
}

::v-deep .el-form-item.is-error .el-input__inner {
  border-color: #d2c8c8;
  width: 600px;
}

.el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 50%;
  left: 36px;
}

::v-deep .OptionContent .el-form-item__content {
  margin-left: 10px;
  text-align: left;
}

.del {
  border: 0;
  margin-left: 195px;
  color: #fff;
  line-height: 24px;
  width: 24px;
  height: 24px;
  background-color: #b5b5b5;
}

::v-deep .newAdd .el-form-item__content {
  position: absolute;
  bottom: 20px;
  left: 36%;
}
//添加框内的输入框
.addBtn {
  ::v-deep  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 21px;
    width: 100%;
    font-size: 13px;
  }
}
//
//
::v-deep .el-dialog__footer {
  padding: 20px;
  padding-top: 10px;
  text-align: center;
  box-sizing: border-box;
}

.dialogBody {
  width: 970px;
  //height: 545px;

  .dialogTop > div:first-child {
    color: #101010;
    font-size: 16px;
    width: 100%;
    height: 44px;
    padding: 15px;
    background-color: #ededed;
    border: 1px solid #bbb;
  }

  .TopicContent {
    margin-bottom: 30px;
    //题目输入框
    .TopicContentInput {
      width: 100%;

      ::v-deep .el-input__inner {
        height: 46px !important;
      }
    }
  }

  .dialogBottom {
    width: 970px;

    .dialogBottom > div:first-child {
      color: #101010;
      font-size: 16px;
      width: 100%;
      height: 44px;
      padding: 15px;
      background-color: #ededed;
      border-bottom: 1px solid #bbb;
    }

    .increase {
      left: -37px;
      top: -8px;
      position: relative;
      display: inline-block;
      line-height: 17px;
      border-radius: 0 4px 0 0;
      border-bottom: 1px solid #dcdfe6;
      width: 36px;
      height: 16.8px;
      font-size: 14px;
      background: #f5f7fa;
      border-left: 1px solid #dcdfe6;

      img {
        width: 10px;
        height: 10px;
      }
    }

    .increaseDown {
      left: 38px;
      top: -20px;
      position: relative;
      display: inline-block;
      line-height: 17px;
      border-radius: 0 4px 0 0;
      border-bottom: 1px solid #dcdfe6;
      width: 36px;
      height: 16.8px;
      font-size: 14px;
      background: #f5f7fa;
      border-left: 1px solid #dcdfe6;

      img {
        width: 10px;
        height: 10px;
      }
    }

    .arrow-up .arrow-down {
      speak: none;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
    }


  }
}

.el-form-item__label {
  padding: 0 13px 0 13px;
}

.OptionContent {
  position: relative;
  padding: 40px 0;
  text-align: center;
  min-width: 700px;
  min-height: 500px;
  width: 100%;

  .optionInput {
    width: 540px;

    ::v-deep .el-input__inner {
      width: 540px;
    }
  }

  .numberInput {
    width: 164px;

    ::v-deep.el-input__inner {
      width: 164px;
    }
  }

  ::v-deep .el-form-item__content {
    margin-left: 10px;
  }

  ::v-deep .el-form-item__content {
    text-align: center;
  }

}

::v-deep .el-form-item .el-form-item {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-start;
}

.el-form-content {
  margin-top: 5px;
  margin-left: 10px;
  color: #fff;
  line-height: 24px;
  width: 24px;
  height: 24px;
  background-color: #b5b5b5;
}

.el-icon-close {
  color: white;
}

.dialogBottom {
  border: 1px solid #bbb;
}

//

::v-deep .el-form-item.is-error .el-input__inner {
  border-color: #d2c8c8;
}

.dialogBottom > div:first-child {
  color: #101010;
  font-size: 16px;
  width: 100%;
  height: 44px;
  padding: 15px;
  background-color: #ededed;
  border-bottom: 1px solid #bbb;
}

.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus {
  border-color: #d9d7d7;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.option {
  width: 600px;
  border-color: #c0c4cc;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
}

.body {
  padding: 29px;
}

::v-deep .el-table th.el-table__cell.is-leaf {
  text-align: center;
}

::v-deep .el-table th.el-table__cell.is-leaf {
  text-align: center;
}

::v-deep .el-dialog {
  width: 68% !important;
}

::v-deep .el-table tr td {
  text-align: center;
}

::v-deep .el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
  background-color: #1892ff;
  border-radius: 3px 3px 0 0;
  color: white;
}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: white;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
  border-radius: 5px;
}
</style>
